<template>
	<view>
		<view class="content-padding">
			<view class="card-input">
				<view class="">手机号</view>
				<input type="number" v-model="mobile" placeholder="请输入您的手机号"/>
			</view>
			<view class="card-input" style="padding-right: 30rpx;position: relative;">
				<view class="">验证码</view>
				<input type="text" v-model="code" placeholder="请输入验证码"/>
				<text class="yanzhengma" @tap="isCode && getCode()">{{codeText}}</text>
			</view>
			<view class="card-input">
				<view class="">新密码</view>
				<input type="text" v-model="password" value="" password placeholder="请输入新密码"/>
			</view>
			<view class="card-input" style="border: unset;">
				<view class="">确认密码</view>
				<input type="text" v-model="newpassword" value="" password placeholder="请再次输入新密码"/>
			</view>
		</view>
		<view class="">
			<view class="" style="padding: 0 54rpx; ">
				<view class="zhuce" @tap="submit()">重置密码</view>
			</view>
		</view>
		<selfPopupMessage ref="selfPopupMessage"></selfPopupMessage>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeText:"发送验证码",
				isCode:true,
				mobile:"",
				code:"",
				password:"",
				newpassword:""
				
			}
		},
		methods: {
			getCode(){
				if(this.$util.checkmobile(this.mobile)){
					this.$refs.selfPopupMessage.open("请输入正确的手机号","error");
					return;
				}
				this.isCode = false;
				var miao = 60;
				var that = this;
				this.$util.nuiAjax(this.$jiekou.getCode,{mobile:this.mobile},function(res){
					if(res.result=="true"){
						var intervalId = setInterval(function(){
							if(miao>=1){
								that.codeText = miao+"s";
								miao--;
							}else{
								that.isCode = true;
								that.codeText = "重新获取";
								clearInterval(intervalId);
							}
						},1000)
						that.$refs.selfPopupMessage.open(res.message);
					}else{
						that.$refs.selfPopupMessage.open(res.message,"error");
					}
				})
			}
			,submit(){
				
				if(this.$util.checkmobile(this.mobile)){
					this.$refs.selfPopupMessage.open("请输入正确的手机号","error");
					return;
				}
				if(this.code==""){
					this.$refs.selfPopupMessage.open("请输入验证码","error");
					return;
				}
				if(this.password==""){
					this.$refs.selfPopupMessage.open("请输入新密码","error");
					return;
				}
				if(this.newpassword==""){
					this.$refs.selfPopupMessage.open("请再次输入新密码","error");
					return;
				}
				if(this.newpassword != this.password){
					this.$refs.selfPopupMessage.open("两次输入的密码不同，请重新输入","error");
					return;
				}
				var that = this;
				this.$util.nuiAjax(this.$jiekou.forgetPass,{mobile:this.mobile,code:this.code,password:this.password},function(res){
					if(res.result=="true"){
						that.$refs.selfPopupMessage.open(res.message,"success",1000,function(){
							that.$util.goback();
						});
					}else{
						that.$refs.selfPopupMessage.open(res.message,"error");
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.yanzhengma{
		width:144rpx;
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:$uni-color-primary;
		line-height:40rpx;
		// padding: 10rpx;
		// box-shadow: 1rpx 1rpx 1rpx #f1f1f1
		// border: 1rpx $uni-color-primary solid;
		// position: absolute;
		// right: 30rpx;
		text-align: center;
		// margin: auto;
		// top: 0;
		// bottom: 0;
	}
	.zhuce{
		background-color: $uni-color-primary;
		height:96rpx;
		border-radius:48rpx;
		margin-top: 100rpx;
		text-align: center;
		line-height: 96rpx;
		color: $uni-text-color-inverse;
		letter-spacing: 1rpx;
		font-size: 32rpx;
	}
	page{
		background-color: $page-bg-color;
	}
	.content-padding{
		padding: 0 0 0 30upx;
		background-color: #FFFFFF;
	}
	.card-input{
		padding: 30rpx 0;
		display: flex;
		flex-flow: row;
		border-bottom: #EFEFEF solid 1rpx;
	}
	.card-input view{
		width: 116rpx;
		height:40rpx;
		font-size:28rpx;
		line-height: 40rpx;
	}
	.card-input input{
		padding-left: 20rpx;
		flex: 1;
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		line-height:40rpx;
	}
</style>
